<template>
    <el-main>
      <el-card>
          <h1 style="font-size:30px">挂号患者信息</h1>
         <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="患者姓名">
                <el-input v-model="formInline.patientName" placeholder="患者姓名"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
                <el-input v-model="formInline.cardId" placeholder="身份证号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit"  icon="el-icon-search">搜索</el-button>
                <el-button @click="resetForm()"   icon="el-icon-refresh">重置</el-button>
            </el-form-item>
        </el-form>
      </el-card>  
      <el-card> 
      <el-table :data="pageData.content">
          <el-table-column>
              <el-checkbox></el-checkbox>
        </el-table-column>
        <el-table-column prop="patientId" label="患者id" >
        </el-table-column>
        <el-table-column prop="patientName" label="姓名" >
        </el-table-column>
        <el-table-column prop="patientPhone" label="手机号码" >
        </el-table-column>
        <el-table-column prop="patientStatus" label="患者状态" >
              <template slot-scope="scope">
                <span>{{scope.row.patientStatus== 1 ? '预约状态' :'就诊状态'}}</span>
            </template> 
        </el-table-column>
        <el-table-column prop="emergencyContactPhone" label="紧急电话" width="110px">
        </el-table-column>
        <el-table-column prop="cardId" label="身份证号"  width="200px">
        </el-table-column>
        <el-table-column prop="department.departmentName" label="就诊部门"  >
        </el-table-column>
        <el-table-column prop="subjects.subjectName" label="就诊科目" width="120px" >
        </el-table-column>
         <el-table-column prop="appointmentId" label="挂号号码"  >
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="180">
            <template slot-scope="scope">
                <el-button type="success"  size="mini" icon="el-icon-edit" @click="up(scope.row)">修改</el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="open(scope.row)">删除</el-button>
            </template>
        </el-table-column>
      </el-table> 
            <el-row>
                    <el-col :sapn="12" :offset="7">
                                <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="pageData.current"
                                :page-sizes="[2,4, 6, 8]"
                                :page-size="pageData.size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="pageData.total">
                                </el-pagination>
                    </el-col>
            </el-row>     
      </el-card> 
          <el-dialog title="修改预约记录" :visible.sync="dialogFormVisible">
                        <el-form :model="form">
                            <el-row>
                                <el-col span="8">
                                      <el-form-item label="患者姓名" :label-width="formLabelWidth">
                                       <el-input v-model="form.patientName" autocomplete="off" disabled="disabled"></el-input>
                                    </el-form-item>
                                 </el-col>
                                 <el-col span="8">
                                    <el-form-item label="手机号码" :label-width="formLabelWidth">
                                       <el-input v-model="form.patientPhone" autocomplete="off" disabled="disabled">></el-input>
                                    </el-form-item>
                                 </el-col>
                                 <el-col span="8">
                                    <el-form-item label="紧急联系电话" :label-width="formLabelWidth" >
                                       <el-input v-model="form.emergencyContactPhone" autocomplete="off" disabled="disabled"></el-input>
                                    </el-form-item>
                                 </el-col>
                             
                            </el-row>   
                            <el-row>
                                 <el-col span="8">
                                      <el-form-item label="挂号号码" :label-width="formLabelWidth">
                                       <el-input v-model="form.appointmentId" autocomplete="off" disabled="disabled"></el-input>
                                    </el-form-item>
                                 </el-col>
                                <el-col span="8">
                                     <el-form-item label="患者状态" :label-width="formLabelWidth">
                                        <el-select v-model="form.patientStatus" placeholder="患者状态">
                                            <el-option label="预约状态" :value="1" ></el-option>
                                            <el-option label="就诊状态" :value="2"></el-option>
                                        </el-select>
                                    </el-form-item>
                                 </el-col>
                            </el-row> 
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="upCheck">确 定</el-button>
                        </div>
     </el-dialog>
    </el-main>
</template>

<style>

</style>

<script>
export default({
     data() {
           return{
               formInline: {
                patientName: "",
                cardId: "",
                current:1,
                size:4,      
                },
                form:{
                patientPhone:"",
                emergencyContactPhone:"",
                patientStatus:"",
                patientName:"",
                appointmentId:"",
                patientId:'',
                },
                dialogFormVisible: false,
                pageData:{
                current:1,
                total:10,
                content:[],
                size:4, 
                },
                 formLabelWidth: '100px'
        }
    },
    mounted() {
         this.onSubmit();
     },
    methods: {
        onSubmit(){
            this.$axios.post("/api/biz/inf/list",this.formInline).then((res)=>{
                if(res.data.code==0){
                    this.pageData=res.data.data.pageData;
                    this.formInline=res.data.data.searchForm;
                    this.formInline=res.data.data.searchForm
                }
                
            })
        },
    handleSizeChange(size){
            this.formInline.size=size;
           this.onSubmit();
    },
    handleCurrentChange(current){
         this.formInline.current=current;
         this.onSubmit();
    },
    up(row){   
                 this.form.patientId=row.patientId
                 this.form.patientPhone=row.patientPhone
                 this.form.emergencyContactPhone=row.emergencyContactPhone
                 this.form.patientStatus=row.patientStatus
                 this.form.patientName=row.patientName
                 this.form.appointmentId=row.appointmentId
                 this.dialogFormVisible = true;   
              },
           upCheck(){
                  this.$axios.post("/api/biz/inf/up",this.form).then((res)=>{ 
                            if(res.data.code==0){
                                   this.onSubmit();
                            }else{
                                   this.$message.error(res.data.msg)
                                }    
                            })
                   this.dialogFormVisible = false;
              },
            open(row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    console.log(row.patientId);
                 this.$axios.post("/api/biz/inf/del",row.patientId).then((res)=>{ 
                            if(res.data.code==0){
                                   this.getDate();
                            }else{
                                   this.$message.error(res.data.msg)
                                }    
                            })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
            }
    },
})
</script>
